<template>
  <div class="modal-example">
      <div class="modal">
        <div class="modal-header">
          <h4>{{title}}</h4>
        </div>
        <div class="modal-content">
          <div>
            {{detail}}
						<slot name="detail"></slot>
          </div>
        </div>
        <div class="modal-footer">
          <input class="btn" type="button" :value="btnOkVal"  @click="foo"/>
          <input class="btn" type="button" value="cancel" />
        </div>
      </div>
			
  </div>
</template>
<script>
  export default {
		name: 'modal',
		props: {
			btnOkVal: {
				type: String,
				default: '确定'
			},
			title: {
				type: String,
				default: '这是一个标题'
			},
			detail: {
				type: String,
				default: '在这里添加内容'
			},
			value: {
				type: String,
				default: '标题'
			},
			detail: {
				type: String,
				default: '这是详情说明~'
			}
		},
		methods: {
			foo () {
				console.log('我被触发了')
				this.$emit('ok-click')

				// 双向数据绑定（v-model）
				this.$emit('input', '双向数据绑定（v-model）')

				// .sync 修饰符与 update 配合使用
				this.$emit('update:detail', '.sync 修饰符与 update 配合使用')

				// 使用 事件总线通信（event bus）
				this.$eventBus.$emit('ok-click', true)
			}
		}
	}
</script>
<style scoped>
p,h4{
	margin:0;
}
.modal{
	width: 500px;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 6px;
	box-shadow: 0 3px 9px rgba(0,0,0,.5);
	-position: absolute;
	left: 50%;
	top: 50%;
	-transform: translate(-50%,-50%);
	z-index: 111;
}
.modal-header {
	padding: 15px;
	border-bottom: 1px solid #e5e5e5;
}
.modal-content div {
	padding: 20px;
}
.modal-footer {
	padding: 15px;
	text-align: right;
	border-top: 1px solid #e5e5e5;
}
.btn {
	padding: 5px 15px;

}
</style>

